<template>
    <div class="product-control">
        <a-row class="table-up-row">
            <a-col :span="4">
                <a-button type="primary" @click="onEdit('add')" size="large">新增</a-button>
            </a-col>
        </a-row>
        <TableComp
            ref="MytableRef"
            @updateTable="updateTable"
            @del="onDel"
            :dataSource="data"
            :columns="columns"
            :isEditRow="false"
            bordered
        >
            <template #bodyCell="{ column, text, record }">
                <template v-if="column.key === 'action'">
                    <a-row>
                        <a-button type="link" @click="onEdit('edit', record)">编辑</a-button>
                        <a-popconfirm title="Sure to delete?" @confirm="onDel(record)">
                            <a-button type="link" danger>删除</a-button>
                        </a-popconfirm>
                    </a-row>
                </template>
            </template>
        </TableComp>
        <EditDialogComp ref="EditDialogRef" @refresh="refresh"></EditDialogComp>
    </div>
</template>
<script lang="ts">
import { defineComponent, toRefs, onMounted, ref, reactive } from 'vue'

import TableComp from '@/components/TableComp/index.vue'
import EditDialogComp from './comps/edit-dialog/index.vue'

import { toast } from '@/utils/common'
import { COLUMNS } from './config'
import { List, Edit, Del } from './store'
import type { ItemResponse } from './type'

export default defineComponent({
    name: 'productControl',
    components: {
        TableComp,
        EditDialogComp
    },
    setup() {
        const components = {
            TableCompRef: ref<InstanceType<typeof TableComp>>(),
            EditDialogRef: ref<InstanceType<typeof EditDialogComp>>()
        }
        const state = reactive({
            columns: COLUMNS,
            data: [] as Array<any>
        })
        onMounted(async () => {
            await methods.getList()
        })
        const methods = {
            async updateTable(value: any) {
                const { change, editObj } = value
                if (change) {
                    console.log('刷新表格', value)
                    try {
                        const res = await Edit(editObj)
                        toast()
                    } catch (err: any) {
                        throw new Error(err)
                    }
                } else {
                    console.log('未改变')
                }
            },
            async onDel(row: ItemResponse) {
                const res = await Del(row.id)
                await methods.getList()
                toast()
            },
            async onEdit(type?: 'add' | 'edit', row?: ItemResponse) {
                if (type === 'add') {
                    components.EditDialogRef.value?.open()
                } else if (type === 'edit') {
                    components.EditDialogRef.value?.open(row)
                }
            },
            async getList() {
                const { result }: any = await List()
                state.data = result as ItemResponse[]
            },
            refresh() {
                methods.getList()
            }
        }
        return {
            ...toRefs(state),
            ...methods,
            ...components
        }
    }
})
</script>
<style lang="scss" scoped>
.product-control {
    background-color: #ffffff;
    padding: 20px;
    .table-up-row {
        margin-bottom: 20px;
    }
}
</style>
